﻿<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="/css/downLoad.css" />
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="/css/bootstrap.min.css">
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="/js/bootstrap.min.js"></script>
		<style type="text/css">
			.down_list {
				margin-top: 0px;
				margin-left: 35px;
				margin-right: 35px
			}

			.down_list li:nth-child(1) {
				list-style: none;
				border-bottom: 1px solid #99b5d1;
				background:none;
				padding-left:14px
			}
			.navbar-collapse {
			    padding-right: 0px;
			    padding-left: 0px;
			}

			.down_list li {
				padding-left: 30px;
				padding-right: 30px;
				width: 100%;
				height: 45px;
				line-height: 45px;
				border-bottom: 1px dotted #99b5d1;
				color: #666;
				/*overflow: hidden;*/
				font-size: 14px;
				background: url(/img/downLoad/dian.png) no-repeat 15px 21px;
			}
			.nav {
				margin-left:0px;
			}

			.nav-pills {
				/*height:68px;*/
				background-color: #f6f6f6;
				padding-left:11px;
				margin-top:-5px;
				margin-left:10px

			}

			.nav-pills a {
				color: #666;
			}
/*
			.nav-pills>li.active>a,
			.nav-pills>li.active>a:focus,
			.nav-pills>li.active>a:hover {
				color: #00478B;
				background-color: #f6f6f6;
			}*/
			.nav-pills>li.active>a,
			.nav-pills>li.active>a:focus,
			.nav-pills>li.active>a:hover {
				color: #00478B;
				background-color: #f6f6f6;
			}
			.navbar-left{
				margin-left:360px;
			}
			.img{
				line-height:65px
			}
			.navbar-default {
		    background-color: #f8f8f8;
		    border-color: #e7e7e7;
		    margin-top: -30px;
		}
		.navbar-nav li{
			width:100px;
			text-align: center;

		}
		.container-fluid {
	    /*padding-right: 15px;*/
	    padding-left: 0px;
	    margin-right: auto;
	    margin-left: auto;
	}
	  img{
		margin-top:13px
	}
	.preTag{
		
		display:inline-block;
		background-color:#ededed;
	}
	.loadEffect{
            width: 100px;
            height: 100px;
            position: absolute;
            margin: 0 auto;
            margin-top:100px;
            top:50px;
            left:470px;
            /*display:none;*/
        }
        .loadEffect span{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0.2;
            }
        }
        .loadEffect span:nth-child(1){
            left: 0;
            top: 50%;
            margin-top:-8px;
            -webkit-animation-delay:0.13s;
        }
        .loadEffect span:nth-child(2){
            left: 14px;
            top: 14px;
            -webkit-animation-delay:0.26s;
        }
        .loadEffect span:nth-child(3){
            left: 50%;
            top: 0;
            margin-left: -8px;
            -webkit-animation-delay:0.39s;
        }
        .loadEffect span:nth-child(4){
            top: 14px;
            right:14px;
            -webkit-animation-delay:0.52s;
        }
        .loadEffect span:nth-child(5){
            right: 0;
            top: 50%;
            margin-top:-8px;
            -webkit-animation-delay:0.65s;
        }
        .loadEffect span:nth-child(6){
            right: 14px;
            bottom:14px;
            -webkit-animation-delay:0.78s;
        }
        .loadEffect span:nth-child(7){
            bottom: 0;
            left: 50%;
            margin-left: -8px;
            -webkit-animation-delay:0.91s;
        }
        .loadEffect span:nth-child(8){
            bottom: 14px;
            left: 14px;
            -webkit-animation-delay:1.04s;
        }
        .white_cover{
        	width:1000px;
        	height:800px;
        	position:absolute;
        	top: 114px;
        	left: 30px;
        	background-color:#fff;
        	z-index: 1000;
        	display:none;
        }
		</style>
		<title></title>
	</head>

	<body>
		<div class="down_con">
			<nav class="navbar navbar-default">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav" id="myTab">
							<? foreach ($data as $key => $val) {
								?>
								<li>
									<a href="#<? echo $val['id'];  ?>"><? echo $val['name']?></a>
								</li>
								<?
							} ?>


						</ul>
						<!-- <form class="navbar-form navbar-left">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="请输入关键词">
							</div>
							<button type="submit" class="btn btn-default">搜索</button>
						</form> -->

					</div>
					<!-- /.navbar-collapse -->
				</div>

				<!-- /.container-fluid -->
			</nav>
			<!--这里书写切换内容-->
			<div class="tab-content">
				<? foreach ($data as $key => $val) {
					?>
				<div class="tab-pane" id='<? echo $val['id'];  ?>'>
					<ul class="nav nav-pills">
						<? if(count($val['subFileManage'])>0){
							foreach ($val['subFileManage'] as $k => $v) {
							?>
							<li role="presentation" tag="<? echo $val['id'].'/'.$v['id'] ?>">
								<a class="presentation" href="#<? echo $v['id']; ?>" tag="<? echo $val['id'].'/'.$v['id'] ?>"><? echo $v['name']; ?></a>
							</li>
						<?}
					} ?>
					</ul>
					<div class="tab-content">
						<? if(count($val['subFileManage'])>0){
							foreach ($val['subFileManage'] as $k => $v) {
							?>
							<div class="tab-pane <? if($k==0) echo 'active';?> <? if($k==0 && $key==0) echo 'first';?>" id="<? echo $v['id']; ?>" tag="<? echo $val['id'].'/'.$v['id'] ?>">
								<ul class="down_list">
									<li><span class="left_list">文件名称</span><span class="right_list2">下载</span><span class="right_list1">发布时间</span></li>
									<li><span class="left_list">文件标签</span><span class="right_list2"><a href="#"><img src="/img/downLoad/down.png"/></a></span><span class="right_list1">2017-9-13</span></li>
								</ul>
								<div class="" style="float:right;margin-right:100px;margin-top:20px;">
									<img src="/img/downLoad/1.png" />
								</div>
							</div>
						<?}
					} ?>
					</div>

				</div>
				<?
			} ?>
			</div>
		</div>
		<div class="white_cover">
			<div class="loadEffect">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
		</div>
		</div>
		
	</body>

</html>
<script>
	$(function() {
		$('#myTab a:first').tab('show');
		$('#guang_one a:first').tab('show');
		$('#guang_two a:first').tab('show');
		$('#wuni a:first').tab('show');
		$('#wushui a:first').tab('show');
		$('#myTab a').click(function(e) {
			e.preventDefault();
			$(this).tab('show');
				var target = $(this).attr('href')
				if($(target+' ul li:first a').attr('class')=='presentation preTag'){
					return;
				}else{
					console.log($(target+' ul li:first a').attr('class'))
				$('.preTag').removeClass('preTag')
				$(target+' ul li:first a').addClass('preTag')
				var id=$('.preTag').attr('tag')
				pClick(id);
				}
				
		})
		$('#guang_one a').click(function(e) {
			e.preventDefault();
			$(this).tab('show');
		})
		$('#guang_two a').click(function(e) {
			e.preventDefault();
			$(this).tab('show');
		})
		$('#wuni a').click(function(e) {
			e.preventDefault();
			$(this).tab('show');
		})
		$('#wushui a').click(function(e) {
			e.preventDefault();
			$(this).tab('show');
		})
		$('.presentation').click(function(e){
			e.preventDefault();
			console.log($(this).attr('class'))

			if($(this).attr('class')=='presentation preTag'){
				return;

			}
			$(this).addClass('preTag').parent().siblings().find('a').removeClass('preTag')
	
			$(".down_list").empty();
			$('.white_cover').show()
			var id=$(this).attr('tag');
			$.ajax({
				url: "/uc/ajaxDownList",
					type: "get",
					dataType: "json",
					data:{id:id},
					success: function(response) {
						console.log(response);
						
						var content_li='<li><span class="left_list">文件名称</span><span class="right_list2">下载</span><span class="right_list1">发布时间</span></li>';
						response.data.records.forEach(function(value,index,array){
							content_li=content_li+"<li><span class='left_list'>"+value.title+"</span><span class='right_list2'><a href='"+value.file_path+"' target='_blank'><img src='/img/downLoad/down.png'/></a></span><span class='right_list1'>2017-9-13</span></li>";
 						})
						$(".down_list").html(content_li);
						$('.white_cover').hide()
					},
					error: function(data) {
						console.log(data)
					}
			});
		});
		function pClick(id){
			$(".down_list").empty()
			$('.white_cover').show()
			$.ajax({
				url: "/uc/ajaxDownList",
					type: "get",
					dataType: "json",
					data:{id:id},
					success: function(response) {
						// $('.loadEffect').hide()
						console.log(response);
						
						var content_li='<li><span class="left_list">文件名称</span><span class="right_list2">下载</span><span class="right_list1">发布时间</span></li>';
						response.data.records.forEach(function(value,index,array){
							content_li=content_li+"<li><span class='left_list'>"+value.title+"</span><span class='right_list2'><a href='"+value.file_path+"' target='_blank'><img src='/img/downLoad/down.png'/></a></span><span class='right_list1'>2017-9-13</span></li>";
 						})
						$(".down_list").html(content_li);
						$('.white_cover').hide()
					},
					error: function(data) {
						console.log(data)
					}
			});
		}
		var init_id=$(".first").attr('tag');
		pClick(init_id);
	})
</script>
